<template>
	<view class="banner-box" v-if="state.bannerList.length > 0">
		<swiper class="swiper" :style="{'height':props.height}" circular :indicator-dots="state.bannerList.length > 1"
			indicator-active-color="#D33123" :autoplay="true" :interval="3000">
			<swiper-item v-for="item, index in state.bannerList" :key="index" @click="handleClickImg(item)">
				<image class="img radius-15" :style="{'height':props.height}" :src="item.imageUrl" mode="aspectFill">
				</image>
			</swiper-item>
		</swiper>
	</view>
</template>
<script setup lang="ts">
	import { onMounted, reactive } from 'vue';
	import type { Response, AdvertPositionType, PositionType } from '@/core/models';
	import { queryPositionList } from '@/core/api';
	import { handleAdvertiseDetail } from '@/core/utils';

	const props = withDefaults(defineProps<{
		code : string,
		height : string
	}>(), {
		code: '',
		height: '200rpx'
	});

	const state = reactive<{
		bannerList : Array<PositionType>;
		bannerPosition : PositionType,
	}>({
		bannerList: [],
		bannerPosition: {},
	})

	onMounted(() => {
		getPositionList();
	})

	const getPositionList = async () => {
		const positionList : Response<AdvertPositionType> = await queryPositionList({
			code: props.code,
			platform: 3,
		});
		state.bannerList = positionList.data?.childs || [];
		state.bannerPosition = positionList.data?.position || {};
	}

	const handleClickImg = (item : any) => {
		handleAdvertiseDetail(item.type, item.val)
	}
</script>
<style lang="scss" scoped>
	@import './coreshop-advert.scss';
</style>